<template>
  <div class="body-color">

    <Header></Header>
    <banner></banner>
    <!-- 版心 -->
    <div class="container-fluid">
      <!-- 最新讯息 -->
      <div class="ContentPlaceHolder1_mainboxes">
       

       <div class="body-four-box">

        <div>
          <span>Total transaction amount</span>
          <h4>{{chainData.totalValueAll==null?0:chainData.totalValueAll}}%</h4>
        </div>
        <div><span>24 Hourly transaction volume</span>
          <h4>{{chainData.valueNum}}</h4>
        </div>
        <div><span>Avg block time</span>
          <h4>{{chainData.blockCreateTime}}</h4>
        </div>
        <div><span>Avg Gas Fee（24Within hours）</span>
          <h4>{{chainData.gasAveragePrice}}</h4>
        </div>
      
      </div>



      </div>
    </div>

    <div class="container-fluid">
      <div class="latest-trade">
        <div class="trade latest-blocks">
          <div class="card-header">Latest Blocks</div>
          <div class="card-bodys">
          
          <div v-for="(item,index) in blockArray" :key="index+1">

             <div class="media" >
                <div class="d-box">
                  <span class="d-box">
                    <span class="btn">
                      BK
                    </span>
                  </span>
                </div>
                <div class="media-body">
                  <div class="media-body-header">
                   <span><a href="#" @click="goToBlockInfo(item)">{{item.number}}</a></span>
                  <br>
                  <span>{{getTimeDifference(item.timestamp)}}</span>
                  </div>
                   <div class="media-dsc">
                     <span>Fee Recipient <a class="kaicaiz">{{item.miner.slice(0, 11)}}....</a> </span>
                     <br>
                     <span><a href="#">{{item.transactions}} txns </a>in {{differenceInSeconds(item.timestamp)}} secs</span>
                   </div>
                </div>
                  <div class="eth-number">
                    <a class="media-body-span">{{parseFloat(isNull(item.totalReward))}} ZTC</a>
                  </div>
              </div>
              <hr class="show-hr" v-if="blockArray.length-1!=index">
          </div>
             
      
          </div>
          <div class="card-footer"  @click="goToBlockPage" style="cursor: pointer;">VIEW ALL BLOCKS</div>
        </div>
        <div class="trade latest-transactions"> <div  class="card-header">Latest Transactions</div>
          <div class="card-bodys">
             <div v-for="(item,index) in transactionArray" :key="index+1">
              <div class="media">
                <div class="d-box">
                  <span class="d-box">
                    <span class="btn">
                      TX
                    </span>
                  </span>
                </div>
                 <div class="media-body">
                  <div class="media-body-header">
                   <span @click="goToTransactionInfo(item)"><a href="#">{{item.hash.slice(0, 13)}}....</a></span>
                  <br>
                  <span>{{getTimeDifference(item.timestamp)}}</span>
                  </div>
                   <div class="media-dsc" >
                     <span @click="goToFromAddressInfo(item)">from <a href="">{{item.from.slice(0, 18)}}....</a> </span>
                     <br>
                     <span @click="goToAddressInfo(item)">to <a href="#">{{item.to.slice(0, 18)==""?"null":item.to.slice(0, 18)}}.... </a></span>
                   </div>
                </div>
                  <div class="eth-number">
                    <a class="media-body-span">{{parseFloat(isNull(item.value))}} ZTC</a>
                  </div>
              </div>
               <hr class="show-hr" v-if="transactionArray.length-1!=index">
              </div>
          </div>
          <div class="card-footer" @click="goToTransactionPage" style="cursor: pointer;">VIEW ALL TRANSACTIONS</div></div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import '@/assets/css/Home.css';
import {getBrowserBlock,getTransaction,getBrowserChainData} from '@/api/home.js';
import Header from '@/components/Header.vue';
export default {
  components: { Header },
  name: 'Home',
  data(){
    return {
       blockArray:[],
       transactionArray:[],
       chainData:{}
    }
  },

methods:{
isNull(arg){
  if(arg==null||arg==''){
    return 0;
  }else{
    return arg;
  }
},
  goToBlockInfo(item){
    this.$router.push({name:'blockInfo',params:{blockId:0,inputValue:item.number}})
  },
  goToTransactionInfo(item){
    this.$router.push({name:'transactionInfo',params:{inputValue:item.hash}})
  },

  goToAddressInfo(item){
    this.$router.push({name:'transactionInfoAddress',params:{inputValue:item.to}})
  },
  goToFromAddressInfo(item){
    this.$router.push({name:'transactionInfoAddress',params:{inputValue:item.from}})
  },

  getTimeDifference(time){
       var times= this.differenceInSeconds(time);//秒
       if(times>60){
        times= (times / 60).toFixed(0); //分
        if(times>60){
        times= (times / 60).toFixed(0); // 根据需要调整小数位数
        if(times>24){
         return times= (times / 24).toFixed(0)+" day ago";
        }else{
            return times+" hour ago";
        }
        }else{
            return times+" minute ago"; //分
        }
       }else{
        return times+" secs ago"; //秒
       }
    },
    
     differenceInSeconds(time) {
      const start = time;
      const end = Math.floor(Date.now() / 1000);
      const difference = (end - start); 
      return difference;
    },


    goToTransactionPage() {
      this.$router.push('/transaction');
    },
    goToBlockPage(){
      this.$router.push('/block');
    },


    async onLoad () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      const res = await getBrowserBlock({
        cursor: 0, // 每页10条
        ps: 8
      })
      this.blockArray=res.data.blockInfo
    },


async onLoadBrowserChainData () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      const res = await getBrowserChainData({
      
      })
      this.chainData=res.data
    },
     

   async onLoadTransaction(){
      const res=await getTransaction({
        cursor:0,
        ps:8
       })
     this.transactionArray=res.data.transactionsInfo
   },
    formatString(str) {
      if (str.length <= 20) {
        return str;
      } else {
        return `${str.substr(0, 10)}....${str.substr(-10)}`;
      }
    }
  },





  created(){
   this.onLoad();
   this.onLoadTransaction();
   this.onLoadBrowserChainData();
  }
}

</script>

<style>

.body-color{
  background-color: rgb(0, 0, 0);
  }



</style>